<template>
  <div class="slide_tool_bar">
    <div class="bar_group">
      <div class="bar_group_item" v-if="!isBrowser">
        <img
          title="放映"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/start_play_icon.png"
          v-show="!isPlay"
          @click="isPlay=!isPlay"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="预览"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/preview_icon.png"
          v-show="!preview"
          @click="isShowCover?null:setPreviewState(!preview)"
        >
      </div>
      <span class="bar_group_separator"></span>
    </div>

    <div class="bar_group">
      <div class="bar_group_item">
        <img
          title="撤销（Ctrl+Z）"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/ch.png"
          @click="GoBackEditState"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="重做（Ctrl+Y）"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/cz.png"
          @click="GoNextEditState"
        >
      </div>
      <span class="bar_group_separator"></span>
    </div>

    <div class="bar_group">
      <div class="bar_group_item">
        <img
          title="添加文本"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/text.png"
          @click="addElement('TEXT')"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="添加音频"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/audio.png"
          @click="addElement('AUDIO')"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="添加视频"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/media.png"
          @click="addElement('MEDIA')"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="添加图片"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/image.png"
          @click="addElement('IMAGE')"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="添加文档"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/document.png"
          @click="addElement('DOCUMENT')"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="添加卷宗"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/dossier.png"
          @click="addElement('DOSSIER')"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="添加文书"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/doc.png"
          @click="addElement('DOCDOSSIER')"
        >
      </div>
      <span class="bar_group_separator"></span>
    </div>
    <!--<div class="bar_group">-->
    <!--<div class="bar_group_item">-->
    <!--<img title="锁定宽度" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/lockwidth.png" @click="lockWidth=!lockWidth">-->
    <!--</div>-->
    <!--<div class="bar_group_item">-->
    <!--<img title="锁定高度" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/lockheight.png" @click="lockHeight=!lockHeight">-->
    <!--</div>-->
    <!--<div class="bar_group_item">-->
    <!--<img title="锁定移动" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/unmove.png" @click="lockMove=!lockMove">-->
    <!--</div>-->
    <!--<div class="bar_group_item">-->
    <!--<img title="锁定选中" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/unselect.png" @click="lockSelect=!lockSelect">-->
    <!--</div>-->
    <!--<div class="bar_group_item">-->
    <!--<img title="模板元素" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/template.png" @click="templateElement=!templateElement">-->
    <!--</div>-->
    <!--<div class="bar_group_item">-->
    <!--<select title="边框宽度" v-model="borderStyle" placeholder="请选择">-->
    <!--<option v-for="item in 6" :key="item-1+'px'" :label="item-1+'px'" :value="item-1+'px'"></option>-->
    <!--</select>-->
    <!--</div>-->
    <!--<div class="bar_group_item">-->
    <!--<v-colorPicker v-model="borderColor" style="width: 20px;height: 20px;"-->
    <!--size="mini" title="边框颜色"></v-colorPicker>-->
    <!--</div>-->
    <!--<div class="bar_group_item">-->
    <!--<v-colorPicker v-model="elementBackground" style="width: 20px;height: 20px;" size="mini"-->
    <!--title="背景颜色"></v-colorPicker>-->
    <!--</div>-->
    <!--<span class="bar_group_separator"></span>-->
    <!--</div>-->
    <div class="bar_group">
      <div class="bar_group_item">
        <select title="字体" v-model="fontFamily" placeholder="请选择">
          <option
            v-for="item in fontStyles"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></option>
        </select>
      </div>
      <div class="bar_group_item">
        <select title="字号" v-model="fontSize">
          <option
            v-for="item in 100"
            :key="item+'px'"
            :label="item+'px'"
            v-if="item>20 && item%2==0"
            :value="item+'px'"
          ></option>
        </select>
      </div>
      <div class="bar_group_item">
        <img
          title="加粗"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/bold.png"
          @click="fontWeight=fontWeight?'':'bold'"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="倾斜"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/italic.png"
          @click="fontStyle=fontStyle?'':'italic'"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="下划线"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/underline.png"
          @click="fontDecoration=fontDecoration?'':'underline'"
        >
      </div>
      <div class="bar_group_item">
        <v-colorPicker
          v-model="fontColor"
          style="width: 20px;height: 20px;"
          size="mini"
          title="字体颜色"
        ></v-colorPicker>
      </div>
      <span class="bar_group_separator"></span>
    </div>

    <div class="bar_group">
      <div class="bar_group_item">
        <img
          title="左对齐"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/left.png"
          @click="fontAlign=fontAlign=='left'?'':'left'"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="居中"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/center.png"
          @click="fontAlign=fontAlign=='center'?'':'center'"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="右对齐"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/right.png"
          @click="fontAlign=fontAlign=='right'?'':'right'"
        >
      </div>
      <span class="bar_group_separator"></span>
    </div>
    <div class="bar_group">
      <div class="bar_group_item">
        <img
          title="逆时针旋转90度"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/rotate_left.png"
          @click="rotate(true)"
        >
      </div>
      <div class="bar_group_item">
        <img
          title="顺时针旋转90度"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/rotate_right.png"
          @click="rotate(false)"
        >
      </div>
      <span class="bar_group_separator"></span>
    </div>
    <div class="bar_group">
      <div class="bar_group_item">
        <img
          title="直线"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/line.png"
          @click="addElement('STRAGHTLINE')"
        >
      </div>

      <div class="bar_group_item">
        <img
          title="矩形"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/rectangle.png"
          @click="addElement('RECTANGLE')"
        >
      </div>

      <div class="bar_group_item">
        <img
          title="椭圆"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/ellipse.png"
          @click="addElement('ELLIPSE')"
        >
      </div>
      <span class="bar_group_separator"></span>
    </div>
    <div class="bar_group">
      <div class="bar_group_item">
        <select title="播放动画" v-model="animation">
          <option v-for="item in animations" :key="item.id" :label="item.label" :value="item.id"></option>
        </select>
      </div>
    </div>
    <div class="bar_group">
      <div class="bar_group_item">
        <select v-model="animationTime" title="动画时间">
          <option v-for="item in 5" :key="item+'s'" :label="item+'s'" :value="item+'s'"></option>
        </select>
      </div>
      <span class="bar_group_separator"></span>
    </div>

    <div class="bar_group">
      <div class="bar_group_item">
        <select title="幻灯片背景" v-model="defaultBackground">
          <option v-for="item in styles" :key="item.id" :label="item.styleName" :value="item.id"></option>
        </select>
      </div>
      <!-- <div class="bar_group_item">
        <select v-model="defaultTemplate" title="版式">
          <option v-for="item in template(slide?slide.sid:null)" :key="item.id" :label="item.templateName" :value="item.id"></option>
        </select>
      </div>
      <span class="bar_group_separator"></span>-->
    </div>

    <div class="bar_group">
      <div class="bar_group_item">
        <img
          title="裁剪"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/cut_icon.png"
          @click="isShowCover?null:isCropImage=!isCropImage"
        >
      </div>
      <span class="bar_group_separator"></span>
    </div>

    <v-modal
      :styleobj="{width:'300px',height:'500px'}"
      :modaltitle="eletype == 'DOSSIER'?'选择电子卷宗':'选择文书卷宗'"
      :modalshow="dossierModal"
      @hide="dossierModal=false"
    >
      <div class="modal_content" slot="modal">
        <div class="modal_tree">
          <dossier-tree
            ref="dossier"
            :showCheckbox="true"
            :showContextmenu="false"
            :show-delete="false"
            :data-source="treeDataSource"
            style="width:100%;height:400px;overflow:auto"
          ></dossier-tree>
          <div class="modal_buttom">
            <v-button
              style="float:right;margin:10px 10px 0 0"
              size="small"
              type="plain"
              @click="dossierModal=false"
            >取消
            </v-button>
            <v-button
              style="float:right;margin:10px 10px 0 0"
              size="small"
              type="primary"
              @click="addDossier"
            >确认
            </v-button>
          </div>
        </div>
      </div>
    </v-modal>
  </div>
</template>

<script>
  import {Button, ColorPicker, Checkbox, RadioGroup, Radio} from 'element-ui'
  import {mapState, mapActions, mapGetters} from 'vuex'
  import action from '../../common/typeActions'
  import SQLite from '../../common/SQLiteHelper'
  import Vmodal from '../../components/Vmodal'
  import SlideEditorLayer from './SlideEditorLayer'
  import editorServer from '../../server/slideEditor/editorServer'
  import uuid from 'uuid/v4'
  import DossierTree from '../../components/DossierTree'

  export default {
    name: 'SlideEditToolbar',
    components: {
      'v-radio-group': RadioGroup,
      'v-radio': Radio,
      'v-colorPicker': ColorPicker,
      'v-checkbox': Checkbox,
      'v-button': Button,
      'v-modal': Vmodal,
      'v-slide-editor-layer': SlideEditorLayer,
      DossierTree
    },
    data () {
      return {
        eletype: '',
        dossierModal: false,
        isDeveloper: false,
        fileFilterText: '',
        fileProps: {children: 'children', label: 'MLXSMC'},
        treeDataSource: null,
        isBrowser: process.browser,
        dirArray: []
      }
    },
    mounted: async function () {
    },
    // 计算表达式
    computed: {
      ...mapState({
        slideEditor: state => state.slideEditor,
        styles: state => state.slideEditor.styles,
        activeElement: state => state.slideEditor.activeElement,
        autoPlay: state => state.slideEditor.autoPlay,
        preview: state => state.slideEditor.preview,
        customized: state => state.slideEditor.customized,
        slide: state => state.slideEditor.slide,
        isShowCover: state => state.slideEditor.isShowCover,
        slideCovers: state => state.slideEditor.covers,
        fontStyles: state => state.slideEditor.fontStyles,
        animations: state => state.slideEditor.animations,
        dossierTreeDataSource: state => state.appearCourt.dossierTreeDataSource,
        docDossierTreeDataSource: state =>
          state.appearCourt.docDossierTreeDataSource
      }),
      ...mapGetters(['getFilePath', 'template']),
      defaultBackground: {
        get () {
          return this.slide ? this.slide.sid : null
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetSlideStyle, value)
        }
      },
      defaultTemplate: {
        get () {
          return this.slide ? this.slide.tid : null
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetSlideTempalte, value)
        }
      },
      // 字体样式
      fontFamily: {
        get () {
          if (!this.activeElement) return
          return this.activeElement.style['font-family']
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementFont, {
            attrName: 'font-family',
            attrValue: value
          })
        }
      },
      // 字体大小
      fontSize: {
        get () {
          if (!this.activeElement) return
          return this.activeElement.style['font-size']
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementFont, {
            attrName: 'font-size',
            attrValue: value
          })
        }
      },
      // 字体颜色
      fontColor: {
        get () {
          if (!this.activeElement) return
          return this.activeElement.style['color']
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementFont, {
            attrName: 'color',
            attrValue: value
          })
        }
      },
      // 字体粗细
      fontWeight: {
        get () {
          if (!this.activeElement) return
          return this.activeElement.style['font-weight']
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementFont, {
            attrName: 'font-weight',
            attrValue: value
          })
        }
      },
      // 字体倾斜
      fontStyle: {
        get () {
          if (!this.activeElement) return
          return this.activeElement.style['font-style']
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementFont, {
            attrName: 'font-style',
            attrValue: value
          })
        }
      },
      // 字体下滑线
      fontDecoration: {
        get () {
          if (!this.activeElement) return
          return this.activeElement.style['text-decoration']
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementFont, {
            attrName: 'text-decoration',
            attrValue: value
          })
        }
      },
      // 字体对齐
      fontAlign: {
        get () {
          if (!this.activeElement) return
          return this.activeElement.style['text-align']
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementFont, {
            attrName: 'text-align',
            attrValue: value
          })
        }
      },
      animation: {
        get () {
          if (!this.activeElement || !this.activeElement.animation) return
          if (this.activeElement.animation.length) {
            return this.activeElement.animation[0].id
          } else {
            let ani = this.animations.find(x => {
              return !x.value
            })
            return ani ? ani.id : ''
          }
        },
        set (value) {
          let ani = this.animations.find(x => {
            return x.id === value
          })
          if (!ani) return
          this.$store.dispatch(action.SLIDEEDITOR.AddElementAnimation, {
            id: ani.id,
            name: ani.value
          })
        }
      },
      animationTime: {
        get () {
          if (!this.activeElement || !this.activeElement.animation) return
          if (this.activeElement.animation.length) {
            return this.activeElement.animation[0].time
          } else {
            let ani = this.animations.find(x => {
              return !x.value
            })
            return ani ? ani.time : ''
          }
        },
        set (value) {
          if (!this.activeElement || !this.activeElement.animation) return
          let ani = null
          if (this.activeElement.animation.length) {
            ani = this.activeElement.animation[0]
          }
          ani.time = value
          this.$store.dispatch(action.SLIDEEDITOR.AddElementAnimation, ani)
        }
      },
      // 锁定宽度
      lockWidth: {
        get: function () {
          if (!this.activeElement) return
          return this.activeElement.lockWidth
        },
        set: function (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementAttr, {
            attrName: 'lockWidth',
            attrValue: value
          })
        }
      },
      // 锁定高度
      lockHeight: {
        get: function () {
          if (!this.activeElement) return
          return this.activeElement.lockHeight
        },
        set: function (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementAttr, {
            attrName: 'lockHeight',
            attrValue: value
          })
        }
      },
      // 锁定移动
      lockMove: {
        get: function () {
          if (!this.activeElement) return
          return this.activeElement.lockMove
        },
        set: function (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementAttr, {
            attrName: 'lockMove',
            attrValue: value
          })
        }
      },
      // 锁定移动
      lockSelect: {
        get: function () {
          if (!this.activeElement) return
          return this.activeElement.lockSelect
        },
        set: function (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementAttr, {
            attrName: 'lockSelect',
            attrValue: value
          })
        }
      },
      templateElement: {
        get () {
          if (!this.activeElement) return
          return this.activeElement.templateElement
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementAttr, {
            attrName: 'templateElement',
            attrValue: value
          })
        }
      },
      borderStyle: {
        get: function () {
          if (!this.activeElement) return
          return this.activeElement.style['border-width']
        },
        set: function (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementFont, [
            {attrName: 'border-width', attrValue: value},
            {
              attrName: 'border-style',
              attrValue: parseInt(value) > 0 ? 'solid' : 'none'
            }
          ])
        }
      },
      borderColor: {
        get: function () {
          if (!this.activeElement) return
          return this.activeElement.style['border-color']
        },
        set: function (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementFont, {
            attrName: 'border-color',
            attrValue: value
          })
        }
      },
      elementBackground: {
        get: function () {
          if (!this.activeElement) return
          return this.activeElement.style['background-color']
        },
        set: function (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetActiveElementFont, {
            attrName: 'background-color',
            attrValue: value
          })
        }
      },
      // 设置播放状态
      isPlay: {
        get () {
          return this.slideEditor.isPlay
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetPlayState, value)
        }
      },
      // 播放间隙
      playSpeed: {
        get () {
          return this.customized.PlaySpeed
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetCustomAttr, {
            attrName: 'PlaySpeed',
            attrValue: value
          })
        }
      },
      // template: {
      //   get () {
      //     return this.slide ? this.slide.tid : '
      //   },
      //   set (value) {
      //     this.$store.dispatch(action.SLIDEEDITOR.ChangeSlideTemplate, value)
      //   }
      // },
      // style: {
      //   get () {
      //     return this.slide ? this.slide.sid : '
      //   },
      //   set (value) {
      //     this.$store.dispatch(action.SLIDEEDITOR.ChangeSlideStyle, value)
      //   }
      // },
      isCropImage: {
        get () {
          return this.slideEditor.isCropImage
        },
        set (value) {
          this.setSlideAttr({
            attrName: 'isCropImage',
            attrValue: value
          })
        }
      },
      isShowCover: {
        get () {
          return this.slideEditor.isShowCover
        },
        set (value) {
          this.setSlideAttr({
            attrName: 'isShowCover',
            attrValue: value
          })
        }
      }
    },
    methods: {
      ...mapActions({
        setAutoPlay: action.SLIDEEDITOR.SetAutoPlay,
        setPreviewState: action.SLIDEEDITOR.SetPreviewState,
        previousAnimation: action.SLIDEEDITOR.PreviousAnimation,
        nextAnimation: action.SLIDEEDITOR.NextAnimation,
        saveSlideElement: action.SLIDEEDITOR.SaveSlideElement,
        addCover: action.SLIDEEDITOR.AddCover,
        setCustomCover: action.SLIDEEDITOR.SetCustomCover,
        setCustomCoverText: action.SLIDEEDITOR.SetCustomCoverText,
        setSlideAttr: action.SLIDEEDITOR.SetSlideAttr,
        setCoverState: action.SLIDEEDITOR.SetCoverState,
        setElementAttr: action.SLIDEEDITOR.SetElementAttr,
        addDossierFile: action.SLIDEEDITOR.AddDossierFile,
        GoNextEditState: action.SLIDEEDITOR.GoNextEditState,
        GoBackEditState: action.SLIDEEDITOR.GoBackEditState
      }),
      fileFilterNode (value, data) {
        if (!value) return true
        return data.MLXSMC.indexOf(value) !== -1
      },
      // 添加元素
      addElement: function (eletype) {
        if (eletype === 'DOSSIER' || eletype === 'DOCDOSSIER') {
          this.eletype = eletype
          if (!this.slide) return
          this.fileFilterText = null
          this.treeDataSource =
            eletype === 'DOSSIER' ? null : this.docDossierTreeDataSource
          this.dossierModal = true
        } else {
          this.$store.dispatch(action.SLIDEEDITOR.SetDefaultElement, {
            ElementType: eletype
          })
        }
      },
      addDossier: async function () {
        try {
          let datasource = this.$refs.dossier.getSelectedNodes()
          let selectedNodes = datasource.filter(x => {
            return x.FileType !== 'dir'
          })
          if (selectedNodes.length === 0) {
            return await this.$message({
              message: '请勾选需要添加的证据材料',
              type: 'warning'
            })
          }
          this.loadStatus({
            loading: true,
            loadingText: '正在添加证据材料，请稍等...'
          })

          let fileIDs = []
          selectedNodes.forEach(item => {
            fileIDs.push(item.ID)
          })
          console.time('获取证据材料')
          console.log(fileIDs.join(','))
          let files = null
          if (process.browser) {
            files = await this.$api.post.GetEvidenceMaterial({
              files: fileIDs,
              dbPath: this.$store.state.appearCourt.casePath
            })
          } else {
            files = await SQLite.GetEvidenceMaterial(fileIDs)
          }

          console.timeEnd('获取证据材料')
          let arr = []
          let preFileCode = null // 上一图片文件编号
          selectedNodes = this.addNode(datasource)
          files.forEach((file, index) => {
            let fileName = selectedNodes.find(x => {
              return x.ID === file.WJID
            })

            arr.push({
              type: 'IMAGE',
              orientation: 'left',
              distance: preFileCode !== file.WJID ? 0.05 : 0,
              html: fileName ? fileName.MLXSMC : '',
              text: fileName ? fileName.MLXSMC : '',
              fileID: file.WJID,
              path: file.ID
            })
            preFileCode = file.WJID
          })
          this.addDossierFile(files)
          this.$store.dispatch(action.SLIDEEDITOR.AddSlideElements, arr)
          this.dossierModal = false
        } catch (error) {
          this.$alert(error.message, '添加证据材料错误', {type: 'warning'})
        } finally {
          this.loadStatus({loading: false})
        }
      },
      // 获取所有节点的name
      addNode: function (addNodes) {
        this.dirArray = []
        let fileArray = []
        addNodes.forEach((ele, idx) => {
          if (ele.FileType === 'file') {
            fileArray.push(ele)
          } else if (ele.FileType === 'dir') {
            this.dirArray.push(ele)
          }
        })
        fileArray = this.deepCopy(fileArray)
        this.dirArray = this.deepCopy(this.dirArray)
        fileArray.forEach(element => {
          element.MLXSMC =
            this.addNodeAgain(element) + '(' + element.MLXSMC + ')'
        })
        return fileArray
      },
      // 深度copy
      deepCopy: function (arr) {
        var obj = arr instanceof Array ? [] : {}
        for (var item in arr) {
          if (typeof arr[item] === 'object') {
            obj[item] = this.deepCopy(arr[item])
          } else {
            obj[item] = arr[item]
          }
        }
        return obj
      },
      // 递归方法
      addNodeAgain: function (element) {
        console.log(element)
        let index = -1
        let str = ''
        this.dirArray.forEach((ele, idx) => {
          if (element.NodeParentID === ele.NodeID) {
            index = idx
            // 只调上一层
            // str = this.addNodeAgain(ele)
          }
        })
        return index !== -1 ? str + this.dirArray[index].MLXSMC : ''
      },
      // 保存幻灯片风格
      saveStyle: function () {
        // let self = this
        this.$prompt('请输入风格名称：', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '风格名称不能为空'
        }).then(({value}) => {
          this.$store
            .dispatch(action.SLIDEEDITOR.SaveStyles, value)
            .then(() => {
              this.$alert('保存风格成功', '提示', {type: 'success'})
            })
            .catch(err => {
              this.$message({
                message: err.message,
                type: 'warning'
              })
            })
        })
      },
      // 保存版式
      saveTemplate: function () {
        this.$prompt('请输入版式名称：', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '版式名称不能为空'
        }).then(({value}) => {
          this.$store
            .dispatch(action.SLIDEEDITOR.SaveTemplates, value)
            .then(() => {
              this.$alert('保存版式成功', '提示', {type: 'success'})
            })
            .catch(err => {
              this.$message({
                message: err.message,
                type: 'warning'
              })
            })
        })
      },
      saveCover: function () {
        this.$prompt('请输入封面名称：', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '封面名称不能为空'
        }).then(async ({value}) => {
          try {
            let cover = this.slideCovers.find(x => {
              return x.coverName === value
            })

            let result = await this.addCover(cover || {coverName: value})
            if (!cover && result) this.slideCovers.push(result)

            this.$alert(cover ? '修改封面成功' : '保存封面成功', '提示', {
              type: 'success'
            })
          } catch (error) {
            this.$message({message: error.message, type: 'warning'})
          }
        })
      },
      // 切换版式
      changeTemplate: function () {
        this.$store.dispatch(
          action.SLIDEEDITOR.ChangeSlideTemplate,
          event.target.value
        )
      },
      saveSlide: function () {
        this.saveSlideElement()
          .then(() => {
            this.$alert('保存成功', '提示', {type: 'success'})
          })
          .catch(err => {
            this.$message({message: err.message, type: 'warning'})
          })
      },
      coverTextChange: function () {
        this.setCustomCoverText(event.target.value).catch(err => {
          this.$message({message: err.message, type: 'warning'})
        })
      },
      rotate: function (isRight) {
        let self = this
        let fileSource = self.getFilePath(this.activeElement.path)
        let img = new Image()
        img.src = fileSource
        img.onload = async () => {
          try {
            let canvas = document.createElement('canvas')
            canvas.setAttribute('width', img.height)
            canvas.setAttribute('height', img.width)
            let canvasContext = canvas.getContext('2d')
            if (isRight) {
              canvasContext.rotate((270 * Math.PI) / 180)
              canvasContext.drawImage(img, -img.width, 0)
            } else {
              canvasContext.rotate((90 * Math.PI) / 180)
              canvasContext.drawImage(img, 0, -img.height)
            }
            let id = uuid()

            let param = {
              fileID: id,
              sid: this.activeElement.sid,
              eid: this.activeElement.id,
              ID: id,
              IMG: canvas.toDataURL(),
              imgID: self.activeElement.path
            }
            await editorServer.addImageStream(param)

            await self.$store.dispatch(action.SLIDEEDITOR.AddDossierFile, [
              {ID: param.ID, IMG: param.IMG}
            ])
            self.$store.dispatch(action.SLIDEEDITOR.SetActiveElementAttr, {attrName: 'path', attrValue: param.ID})
            self.$store.dispatch(action.SLIDEEDITOR.SetActiveElementAttr, {attrName: 'fileCode', attrValue: param.ID})

            this.$eventBus.$emit('pointerup', event)
            // let result = await self.addExternalFile({
            //   fileID: self.activeElement.fileCode,
            //   imageID: self.activeElement.path,
            //   stream: canvas.toDataURL(),
            //   actionName: action.SLIDEEDITOR.AddElementFile
            // })
            // if (!result) throw new Error('旋转图片失败')

            // self.setElementAttr([
            //   // { id: self.activeElement.id, attrName: 'fileCode', attrValue: result.fileID },
            //   {
            //     id: self.activeElement.id,
            //     attrName: 'path',
            //     attrValue: result.imageID[0]
            //   }
            // ])
          } catch (error) {
          }
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .slide_tool_bar {
    background: #fafafa;
  }

  .bar_item {
    border: 1px solid red;
    /*float: left;*/
  }

  .modal_content {
    width: 100%;
    height: 100%;
    background-color: white;
  }

  .modal_tree {
    width: 100%;
    height: 450px;
    position: relative;
    float: left;
  }

  .modal_buttom {
    width: 100%;
    height: 52px;
    /*float: left;*/
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .casepagercpombspan {
    float: left;
    text-align: center;
    color: #bee2fa;
  }

  .casepagercpombspan:hover {
    color: white;
  }

  .casepagercpombspan1 {
    color: white;
  }

  .select_image {
    width: 20px;
    height: 20px;
    margin: 4px;
    border: 1px solid #1e7dbc;
    border-radius: 3px;
    background: #28c6cd;
  }

  .slide_tool_bar {
    width: 100%;
    height: calc(100% - 50px);
    /*background: #288ed3;*/
    float: left;
  }

  .tool_bar_item {
    width: 5%;
    position: relative;
    color: #bee2fa;
  }

  .tool_bar_item:hover {
    background: #1e7dbc;
    color: white;
  }

  .tool_bar_item1 {
    background: #1e7dbc;
    color: white;
  }

  .bar_item {
    cursor: pointer;
  }

  .bar_item_img {
    float: left;
    margin: 11px 16px;
  }

  .bar_item_text {
    line-height: 40px;
  }

  .bar_item_content {
    position: absolute;
    width: 160px;
    height: 40px;
    background: #1e7dbc;
    top: 0;
    right: 160px;
    z-index: 999;
  }

  .bar_item_height_add {
    width: 120px;
    height: 120px;
  }

  .bar_item_height {
    width: 200px;
    height: 120px;
  }

  .bar_item_height1 {
    width: 160px;
    height: 120px;
  }

  .bar_item_height2 {
    width: 120px;
  }

  .bar_item_height3 {
    height: 200px;
    overflow: auto;
    line-height: 40px;
    text-align: center;
  }

  .bar_item_height4 {
    width: 120px;
  }

  .bar_item_height5 {
    width: 200px;
    top: -360px;
    height: 400px;
  }

  .bar_item_height6 {
    width: 160px;
    height: 400px;
  }

  .bar_item_height7 {
    width: 80px;
  }

  .bar_item_height8 {
    height: 80px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #118ad7;
    border-radius: 4px;
  }

  /*!*---滚动条大小--*!*/

  ::-webkit-scrollbar {
    width: 8px;
    height: 10px;
  }

  .bar_item_content_div {
    height: 40px;
    width: 50px;
    float: left;
  }

  .bar_item_content_div select {
    outline: none;
    border: 1px solid #298dd3;
    border-radius: 3px;
    background: #1773af;
    width: calc(100% - 20px);
    height: 30px;
    float: left;
    margin: 5px 10px;
    color: white;
  }

  .bar_item_content select {
    outline: none;
    border: 1px solid #298dd3;
    border-radius: 3px;
    background: #1773af;
    width: calc(100% - 20px);
    height: 30px;
    float: left;
    margin: 5px 10px;
    color: white;
  }

  .bar_item_content_item {
    cursor: pointer;
    width: 30px;
    height: 30px;
    float: left;
    margin: 4px;
    border: 1px solid #1e7dbc;
    border-radius: 3px;
  }

  .bar_item_content_item:hover {
    background: #28c6cd;
    border: 1px solid white;
  }

  .bar_item_content_item1 {
    background: #28c6cd;
    border: 1px solid white;
  }

  .bar_item_content_item img {
    float: left;
    margin: 6px;
  }

  .bar_item_disabled {
    color: rgba(167, 167, 167, 0.753);
    cursor: no-drop;
  }

  .bar_group {
    /*border: 1px solid red;*/
    height: 30px;
    display: inline-block;
    margin-top: 2px;
  }

  .bar_group .bar_group_item {
    /*border: 1px solid #a83140;*/
    margin: 3px;
    display: inline-block;
  }

  .bar_group .bar_group_item img {
    height: 20px;
    width: 20px;
    padding: 3px;
  }

  .bar_group .bar_group_item:hover {
    background-color: #c7d3e4;
  }

  .bar_group_separator {
    display: inline-block;
    background-color: #c0c0c0;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 5px 2px 0;
    height: 18px;
    width: 1px;
    box-shadow: 1px 0 1px rgba(255, 255, 255, 0.5);
  }

  .bar_group:nth-last-child(1) .bar_group_separator {
    width: 0;
  }

  .bar_group_item select {
    height: 22px;
    font-size: 13px;
  }
</style>
